<!--  -->
<template>
  <div>
      <h2>c3媒体查询--分辨率适配的一种方法</h2>
      <!-- 
          其他适配方案包括
          1，vw（表示占屏幕多宽1vw=1%屏幕宽度）
          2，vh（表示占屏幕多高1vh=1%屏幕高度）
          3，%（表示占父元素百分比大小）
          4，rem（通过js动态计算更改根元素字体大小，从而达到适配效果）
       -->
      <div class='box'></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },

  components: {},

  computed: {},

  mounted(){},

  methods: {}
}

</script>
<style lang='scss' scoped>
.box{
    width: 300px;
    height: 300px;
}
// 1280以下展示
@media screen and (max-width: 1280px) {
    .box {
        background-color:rgb(0, 191, 255) !important;
    }
}
// 1440以下展示1280以上
@media screen and (min-width: 1280px) and (max-width: 1440px) {
    .box {
        background-color:rgb(157, 255, 0) !important;
    }
}
// 1920以下展示1440以上
@media screen and (min-width: 1440px) and (max-width: 1920px) {
    .box {
        background-color:rgb(255, 0, 200) !important;
    }
}
// 1920以上展示
@media screen and (min-width: 1920px) {
    .box {
        background-color:rgb(255, 0, 0) !important;
    }
}

</style>